<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>甜品店</title>
    <link href="css/tailwind.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body class="bg-white">
    <!-- 导航栏 -->
    <nav class="bg-transparent fixed w-full z-50">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <!-- 左侧Logo -->
                <div class="flex-shrink-0">
                    <a href="./index.html" class="flex items-center">
                        <img src="cake/logo.jpeg" alt="Logo" class="h-16 w-16 object-contain">
                    </a>
                </div>
                
                <!-- 中间导航链接 -->
                <div class="flex-1 flex justify-center space-x-12">
                    <a href="./index.html" class="text-sm text-gray-600 hover:text-[#B3927F]">首页</a>
                    <a href="./products.html" class="text-sm text-gray-600 hover:text-[#B3927F]">产品系列</a>
                    <a href="./about.html" class="text-sm text-gray-600 hover:text-[#B3927F]">品牌故事</a>
                    <a href="./contact.html" class="text-sm text-gray-600 hover:text-[#B3927F]">联系我们</a>
                </div>
                
                <!-- 右侧功能图标 -->
                <div class="flex items-center space-x-6">
                    <img src="cake/个人.png" alt="个人" class="h-6 w-6 cursor-pointer">
                    <div class="relative">
                        <img src="cake/消息.png" alt="消息" class="h-6 w-6 cursor-pointer">
                        <span class="absolute -top-2 -right-2 bg-[#B3927F] text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">0</span>
                    </div>
                    <img src="cake/搜索.png" alt="搜索" class="h-6 w-6 cursor-pointer">
                </div>
            </div>
        </div>
    </nav>

    <!-- 主横幅 -->
    <div class="relative h-[calc(100vh-80px)] bg-[#FDF8F5]">
        <!-- 主要内容 -->
        <div class="relative h-full">
            <!-- 轮播图 -->
            <div class="h-full" id="carousel">
                <!-- 轮播图片容器 -->
                <div class="carousel-container h-full">
                    <div class="carousel-track flex h-full transition-transform duration-500">
                        <!-- 轮播内容 1 -->
                        <div class="carousel-slide w-full flex-shrink-0">
                            <div class="flex items-center justify-between h-[407px] px-[10%]">
                                <!-- 左侧文字 -->
                                <div class="w-1/3">
                                    <h2 class="text-3xl text-gray-700 mb-4">多重香甜，真「巧」</h2>
                                    <p class="text-xl text-gray-600">他们都喜欢你</p>
                                </div>
                                <!-- 右侧图片 -->
                                <div class="w-2/3 flex justify-end">
                                    <img src="cake/head0.png" alt="巧克力蛋糕" class="h-[80%] object-contain">
                                </div>
                            </div>
                        </div>

                        <!-- 轮播内容 2 -->
                        <div class="carousel-slide w-full flex-shrink-0">
                            <div class="flex items-center justify-between h-full px-[10%]">
                                <div class="w-1/3">
                                    <h2 class="text-3xl text-gray-700 mb-4">甜蜜时刻</h2>
                                    <p class="text-xl text-gray-600">每一口都是幸福的味道</p>
                                </div>
                                <div class="w-2/3 flex justify-end">
                                    <img src="cake/head1.jpeg" alt="奶油蛋糕" class="h-[80%] object-contain">
                                </div>
                            </div>
                        </div>

                        <!-- 轮播内容 3 -->
                        <div class="carousel-slide w-full flex-shrink-0">
                            <div class="flex items-center justify-between h-full px-[10%]">
                                <div class="w-1/3">
                                    <h2 class="text-3xl text-gray-700 mb-4">浪漫樱花</h2>
                                    <p class="text-xl text-gray-600">春日限定，绽放美味</p>
                                </div>
                                <div class="w-2/3 flex justify-end">
                                    <img src="cake/head2.jpeg" alt="樱花蛋糕" class="h-[80%] object-contain">
                                </div>
                            </div>
                        </div>

                        <!-- 轮播内容 4 -->
                        <div class="carousel-slide w-full flex-shrink-0">
                            <div class="flex items-center justify-between h-full px-[10%]">
                                <div class="w-1/3">
                                    <h2 class="text-3xl text-gray-700 mb-4">缤纷果季</h2>
                                    <p class="text-xl text-gray-600">新鲜水果，自然美味</p>
                                </div>
                                <div class="w-2/3 flex justify-end">
                                    <img src="cake/head3.jpeg" alt="水果蛋糕" class="h-[80%] object-contain">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 轮播指示器 -->
                    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-3">
                        <button class="w-8 h-1 bg-[#B3927F] opacity-50 hover:opacity-100 transition-opacity duration-300"></button>
                        <button class="w-8 h-1 bg-[#B3927F] opacity-50 hover:opacity-100 transition-opacity duration-300"></button>
                        <button class="w-8 h-1 bg-[#B3927F] opacity-50 hover:opacity-100 transition-opacity duration-300"></button>
                        <button class="w-8 h-1 bg-[#B3927F] opacity-50 hover:opacity-100 transition-opacity duration-300"></button>
                    </div>

                    <!-- 添加左右切换按钮 -->
                    <button class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/70 hover:bg-white p-3 rounded-full transition-all shadow-lg hover:scale-110" id="prevBtn">
                        <svg class="w-6 h-6 text-[#B3927F]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                    </button>
                    <button class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/70 hover:bg-white p-3 rounded-full transition-all shadow-lg hover:scale-110" id="nextBtn">
                        <svg class="w-6 h-6 text-[#B3927F]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 品示 -->
    <section class="py-24 bg-[#FDF8F5]">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-[#B3927F] mb-4">新品上市</h2>
                <div class="w-20 h-px bg-gray-300 mx-auto mb-2"></div>
                <p class="text-sm text-gray-600 tracking-wider">NEW PRODUCT LAUNCH</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 max-w-6xl mx-auto">
                <!-- 产品卡片 1 -->
                <div class="bg-white p-6 shadow-sm product-card animate-on-scroll rounded-xl">
                    <div class="image-zoom overflow-hidden mb-6 rounded-lg">
                        <img src="cake/cake1.png" alt="芒果慕斯" class="w-full aspect-square object-cover">
                    </div>
                    <div class="text-center">
                        <h3 class="text-lg font-medium mb-3">芒果慕斯</h3>
                        <p class="text-[#B3927F] font-medium">¥198.00<span class="text-sm text-gray-500 ml-1">/1.0磅</span></p>
                    </div>
                </div>
                <!-- 产品卡片 2 -->
                <div class="bg-white p-6 shadow-sm product-card animate-on-scroll rounded-xl">
                    <div class="image-zoom overflow-hidden mb-6 rounded-lg">
                        <img src="cake/cake2.png" alt="提拉米苏" class="w-full aspect-square object-cover">
                    </div>
                    <div class="text-center">
                        <h3 class="text-lg font-medium mb-3">提拉米苏</h3>
                        <p class="text-[#B3927F] font-medium">¥198.00<span class="text-sm text-gray-500 ml-1">/1.0磅</span></p>
                    </div>
                </div>
                <!-- 产品卡片 3 -->
                <div class="bg-white p-6 shadow-sm product-card animate-on-scroll rounded-xl">
                    <div class="image-zoom overflow-hidden mb-6 rounded-lg">
                        <img src="cake/cake3.png" alt="黑森林" class="w-full aspect-square object-cover">
                    </div>
                    <div class="text-center">
                        <h3 class="text-lg font-medium mb-3">黑森林</h3>
                        <p class="text-[#B3927F] font-medium">¥198.00<span class="text-sm text-gray-500 ml-1">/1.0磅</span></p>
                    </div>
                </div>
                <!-- 产品卡片 4 -->
                <div class="bg-white p-6 shadow-sm product-card animate-on-scroll rounded-xl">
                    <div class="image-zoom overflow-hidden mb-6 rounded-lg">
                        <img src="cake/cake4.png" alt="抹茶慕斯" class="w-full aspect-square object-cover">
                    </div>
                    <div class="text-center">
                        <h3 class="text-lg font-medium mb-3">抹茶慕斯</h3>
                        <p class="text-[#B3927F] font-medium">¥198.00<span class="text-sm text-gray-500 ml-1">/1.0磅</span></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 产品推荐 -->
    <section class="py-24 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-[#B3927F] mb-4">产品推荐</h2>
                <div class="w-20 h-px bg-gray-300 mx-auto mb-2"></div>
                <p class="text-sm text-gray-600 tracking-wider">PRODUCT RECOMMENDATION</p>
            </div>
            <div class="max-w-4xl mx-auto space-y-32">
                <!-- 产品详情卡片 1 -->
                <div class="flex flex-col md:flex-row items-center gap-16">
                    <div class="w-full md:w-1/2 relative">
                        <div class="bg-[#B3927F]/5 absolute -top-6 -left-6 w-full h-full -z-10 rounded-2xl"></div>
                        <img src="cake/ccake1.png" alt="Ice Cream Cake" class="w-full rounded-xl shadow-lg">
                    </div>
                    <div class="w-full md:w-1/2 pt-8">
                        <h3 class="text-xl mb-4">Ice Cream Cake with Longan 桂圆淇淋</h3>
                        <p class="text-gray-600 mb-4">比冰淇淋更细腻的口感，比斯更轻盈的味道...</p>
                        <p class="text-[#B3927F] text-lg">¥198.00<span class="text-sm text-gray-500">/1.0磅</span></p>
                    </div>
                </div>
                <!-- 产品详情卡片 2 -->
                <div class="flex flex-col-reverse md:flex-row items-center gap-12">
                    <div class="w-full md:w-1/2 pt-8 text-right">
                        <h3 class="text-xl mb-4">Black and White Chocolate Mousse 黑白巧克力慕斯</h3>
                        <p class="text-gray-600 mb-4">黑白巧克力的完美融合，带来双重享受...</p>
                        <p class="text-[#B3927F] text-lg">¥198.00<span class="text-sm text-gray-500">/1.0磅</span></p>
                    </div>
                    <div class="w-full md:w-1/2 relative">
                        <div class="bg-[#F5F5F5] absolute -top-4 -right-4 w-full h-full -z-10"></div>
                        <img src="cake/ccake2.png" alt="Black and White Chocolate Mousse" class="w-full">
                    </div>
                </div>
                <!-- 产品详情卡片 3 -->
                <div class="flex flex-col md:flex-row items-center gap-12">
                    <div class="w-full md:w-1/2 relative">
                        <div class="bg-[#F5F5F5] absolute -top-4 -left-4 w-full h-full -z-10"></div>
                        <img src="cake/ccake3.png" alt="Tiramisu" class="w-full">
                    </div>
                    <div class="w-full md:w-1/2 pt-8">
                        <h3 class="text-xl mb-4">Classic Tiramisu 经典提拉米苏</h3>
                        <p class="text-gray-600 mb-4">意大利经典甜点，咖啡与奶油的完美邂逅...</p>
                        <p class="text-[#B3927F] text-lg">¥198.00<span class="text-sm text-gray-500">/1.0磅</span></p>
                    </div>
                </div>
                <!-- 产品���情卡片 4 -->
                <div class="flex flex-col-reverse md:flex-row items-center gap-12">
                    <div class="w-full md:w-1/2 pt-8 text-right">
                        <h3 class="text-xl mb-4">Matcha Green Tea 抹茶慕斯</h3>
                        <p class="text-gray-600 mb-4">日式抹茶清新，慕斯的绵密，带来味蕾的双重享受...</p>
                        <p class="text-[#B3927F] text-lg">¥198.00<span class="text-sm text-gray-500">/1.0磅</span></p>
                    </div>
                    <div class="w-full md:w-1/2 relative">
                        <div class="bg-[#F5F5F5] absolute -top-4 -right-4 w-full h-full -z-10"></div>
                        <img src="cake/ccake4.png" alt="Matcha Green Tea" class="w-full">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 公司简介 -->
    <section class="py-16 bg-[#F5F5F5]">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-2xl mb-2">品牌介绍</h2>
                <div class="w-20 h-px bg-gray-300 mx-auto mb-2"></div>
                <p class="text-sm text-gray-500">BRAND INTRODUCTION</p>
            </div>
            <div class="max-w-6xl mx-auto">
                <div class="flex flex-col lg:flex-row items-center gap-16 animate-on-scroll">
                    <!-- 左侧文字介绍 -->
                    <div class="w-full lg:w-1/2 space-y-6">
                        <p class="text-gray-600 leading-relaxed">
                            i甜是一纯手工蛋糕制作品牌，专门经各种巧克力蛋糕、冰淇淋蛋糕、乳脂奶油蛋糕、慕斯蛋糕、芝士奶酪蛋糕、野花礼品。
                        </p>
                        <p class="text-gray-600 leading-relaxed">
                            冷餐会手工一体的高端食品烘焙企业，有原材料均采用界顶级品牌，保证每一口都不辜负广大消费者日益提高的生活品味。
                        </p>
                        <p class="text-gray-600 leading-relaxed">
                            服务社会，致力于传播具有浓郁欧式风情的品牌。
                        </p>
                    </div>
                    <!-- 右侧品牌形象 -->
                    <div class="w-full lg:w-1/2 relative">
                        <div class="bg-white absolute -top-6 -left-6 w-full h-full -z-10 transform rotate-3"></div>
                        <div class="bg-[#B3927F]/10 absolute -bottom-6 -right-6 w-full h-full -z-10 transform -rotate-3"></div>
                        <img src="cake/brand.png" alt="品牌形象" class="w-full rounded-lg shadow-xl relative z-10">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 悬浮购物车按钮 -->
    <a href="./cart.html" class="fixed bottom-8 right-8 bg-white rounded-full p-4 shadow-lg hover:shadow-xl transition-all z-50 group cart-float">
        <div class="relative">
            <svg class="w-6 h-6 text-[#B3927F] group-hover:text-[#9A7B69]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
            <span id="cart-count" class="absolute -top-2 -right-2 bg-[#B3927F] text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
        </div>
    </a>

    <!-- 页脚 -->
    <footer class="bg-gray-100 pt-16 pb-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <!-- 品牌信息 -->
                <div class="space-y-4">
                    <img src="cake/logo.jpeg" alt="Logo" class="h-12 w-12 rounded-full object-cover">
                    <p class="text-sm text-gray-600">用心制作每一份甜点，为您带来最美味的享受。</p>
                </div>
                
                <!-- 快速链接 -->
                <div>
                    <h4 class="text-lg font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="./products.html" class="text-sm text-gray-600 hover:text-[#B3927F]">产品系列</a></li>
                        <li><a href="./about.html" class="text-sm text-gray-600 hover:text-[#B3927F]">品牌故事</a></li>
                        <li><a href="./contact.html" class="text-sm text-gray-600 hover:text-[#B3927F]">联系我们</a></li>
                    </ul>
                </div>
                
                <!-- 联系方式 -->
                <div>
                    <h4 class="text-lg font-medium mb-4">联系我们</h4>
                    <ul class="space-y-2">
                        <li class="text-sm text-gray-600">电话：400-123-4567</li>
                        <li class="text-sm text-gray-600">邮箱：info@icake.com</li>
                        <li class="text-sm text-gray-600">地址：江西省九江市XX路XX号</li>
                    </ul>
                </div>
                
                <!-- 营业时间 -->
                <div>
                    <h4 class="text-lg font-medium mb-4">营业时间</h4>
                    <ul class="space-y-2">
                        <li class="text-sm text-gray-600">周一至周五：10:00 - 21:00</li>
                        <li class="text-sm text-gray-600">周六至周日：09:00 - 22:00</li>
                        <li class="text-sm text-gray-600">节假日：09:00 - 22:00</li>
                    </ul>
                </div>
            </div>
            
            <!-- 版权信息 -->
            <div class="border-t border-gray-200 pt-8">
                <p class="text-center text-sm text-gray-600">© 2024 i点. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- 确保所有脚本在页脚之后 -->
    <script src="js/main.js"></script>
    <script src="js/cart.js"></script>
    <script src="js/carousel.js"></script>

    <!-- 在 body 标签结束前添加 -->
   
</body>
</html> 